<div class="user-profile-container">
  <div class="panel panel-default">
    <div class="panel-heading">创建/编辑用户</div>
    <div class="panel-body">
      <form class="form-horizontal" role="form" [formGroup]="formGroup">
        <div class="form-group">
          <label class="col-md-2 control-label">当前头像：</label>
          <div class="col-md-10">
            <img src="assets/imgs/angular2-small.png" />
          </div>
        </div>
        <div
          class="form-group"
          [ngClass]="{ 'has-error': formGroup.get('avatarURL').invalid }"
        >
          <label class="col-md-2 control-label">上传头像：</label>
          <div class="col-md-10">
            <input
              class="form-control"
              type="file"
              placeholder="上传头像"
              formControlName="avatarURL"
            />
          </div>
        </div>
        <div
          class="form-group"
          [ngClass]="{ 'has-error': formGroup.get('userName').invalid }"
        >
          <label class="col-md-2 control-label">用户名：</label>
          <div class="col-md-10">
            <input
              class="form-control"
              required="required"
              type="input"
              placeholder="用户名"
              formControlName="userName"
            />
          </div>
        </div>
        <div
          class="form-group"
          [ngClass]="{ 'has-error': formGroup.get('nickName').invalid }"
        >
          <label class="col-md-2 control-label">昵称：</label>
          <div class="col-md-10">
            <input
              class="form-control"
              type="input"
              placeholder="昵称"
              formControlName="nickName"
            />
          </div>
        </div>
        <div
          class="form-group"
          [ngClass]="{ 'has-error': formGroup.get('gender').invalid }"
        >
          <label class="col-md-2 control-label">性别：</label>
          <div class="col-md-10">
            <label class="radio-inline">
                <input type="radio" name="gender" value="0" formControlName="gender">男
              </label>
              <label class="radio-inline">
                <input type="radio" name="gender" value="1" formControlName="gender">女
              </label>
              <label class="radio-inline">
                <input type="radio" name="gender" value="2" formControlName="gender">未知
              </label>
          </div>
        </div>
        <div
          class="form-group"
          [ngClass]="{ 'has-error': formGroup.get('email').invalid }"
        >
          <label class="col-md-2 control-label">常用邮箱：</label>
          <div class="col-md-10">
            <input
              class="form-control"
              type="input"
              placeholder="常用邮箱"
              formControlName="email"
            />
          </div>
        </div>
        <div
          class="form-group"
          [ngClass]="{ 'has-error': formGroup.get('cellphone').invalid }"
        >
          <label class="col-md-2 control-label">手机号：</label>
          <div class="col-md-10">
            <input
              class="form-control"
              type="input"
              placeholder="手机号"
              formControlName="cellphone"
            />
          </div>
        </div>
        <div
          class="form-group"
          [ngClass]="{ 'has-error': formGroup.get('password').invalid }"
        >
          <label class="col-md-2 control-label">密码：</label>
          <div class="col-md-10">
            <input
              class="form-control"
              type="password"
              placeholder="密码"
              formControlName="password"
            />
          </div>
        </div>
        <div
          class="form-group"
          [ngClass]="{ 'has-error': formGroup.get('confirmPassword').invalid }"
        >
          <label class="col-md-2 control-label">重复密码：</label>
          <div class="col-md-10">
            <input
              class="form-control"
              type="password"
              placeholder="重复密码"
              formControlName="confirmPassword"
            />
          </div>
        </div>
        <div
          class="form-group"
          [ngClass]="{ 'has-error': formGroup.get('confirmPassword').invalid }"
        >
          <label class="col-md-2 control-label">启用：</label>
          <div class="col-md-10">
            <div class="checkbox">
              <label>
                <input name="status" type="checkbox" formControlName="status" checked/>
              </label>
            </div>
          </div>
        </div>
        <div
          class="form-group"
          [ngClass]="{ 'has-error': formGroup.get('remark').invalid }"
        >
          <label class="col-md-2 control-label">简介：</label>
          <div class="col-md-10">
            <textarea
              rows="5"
              class="form-control"
              formControlName="remark"
              placeholder="简介"
            ></textarea>
          </div>
        </div>
      </form>
    </div>
  </div>
  <form class="form-horizontal" role="form">
    <div class="form-group">
      <div class="col-md-12">
        <button
          type="button"
          class="btn btn-primary btn-margin-1rem"
          (click)="save()"
        >
          保存
        </button>
        <button type="button" class="btn btn-default" (click)="cancel()">
          取消
        </button>
      </div>
    </div>
  </form>
</div>
